<template>
	<div class="layout">
		<Row>
			<Col span="24">
				<Breadcrumb>
					<BreadcrumbItem to="/" @click.native="changeMenu"><Icon type="home"></Icon> 首页</BreadcrumbItem>
					<BreadcrumbItem>{{title}}</BreadcrumbItem>
				</Breadcrumb>
				<div class="cleaner10"></div>
			</Col>

			<Col span="6">
				<Input v-model="key">
					<Select v-model="filterKey" slot="prepend" style="width: 80px">
						<Option v-for="item in keyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
					</Select>
				</Input>
			</Col>
			<Col span="2">
				<Select  placeholder="请选择状态" clearable v-model="statusKey" :style="{marginLeft:'15px'}">
					<Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
			</Col>
			<Col span="4">
				<Button type="primary" :style="{marginLeft:'30px'}" @click="search">搜索</Button>
			</Col>
			<Col span="12">
				<div style="text-align:right">
					<Button type="primary" icon="md-add" @click.native="link2create">新增</Button>
				</div>
			</Col>

			<Col span="24">
				<div class="cleaner10"></div>
				<Table :loading="tableLoading" border stripe :columns="columns" :data="articleData.data"></Table>
				<div class="cleaner10"></div>
				<Page @on-page-size-change="changePageSize" @on-change="changePage" :total="articleData.total" :page-size="articleData.pageSize" :current.sync="articleData.page" :transfer="true" show-elevator show-sizer></Page>
			</Col>
		</Row>

	</div>
</template>
<script>
    // 引入子组件
    import {mapState,mapGetters} from 'vuex'
    import { Avatar, Modal, Row, Col, Table, Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input } from 'iview';
    export default {
        name:'publisher-index',
        components: {Avatar, Modal, Row, Col, Table, Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input},
        data () {
            return {
                title:'优惠券模板列表',
                tableLoading:true,
                articleData:[],
                showDetail:false,
                detail:{},
                statusKey:'',
                statusList: [
                    {value: 0,label: '关闭'},
                    {value: 1,label: '正常'},
                ],
                filterKey:'',
                key:'',
                keyList: [
                    {value: 'title',label: '标题'},
                ],
                columns:[
                    {title: '编号',key: 'id',width: 70,fixed: 'left'},
                    {title: '模板名称',key: 'title'},
                    {title: '优惠券金额',key: 'value'},
                    {title: '状态',key: 'status',
                        render: (h, params) => {
                            let _status=['关闭','正常']
                            return h('div',[
                                h('span', {
                                    class: 1==params.row.status?'success':'warning',
                                }, _status[params.row.status]),
                            ])
                        }
                    },
                    {title: '创建日期',key: 'created_at'},
                    {title: '类别',key: 'classify',
                        render: (h, params) => {
                            let _status=['不限','只限通话','只限文字']
                            return h('div',[
                                h('span', {
                                    class: '',
                                }, _status[params.row.classify-1]),
                            ])

                        }
                    },
                    {title: '使用范围',key: 'range',
                        render: (h, params) => {
                            let _status=['不限','只限通话','只限文字']
                            return h('div',[
                                h('span', {
                                    class: '',
                                }, params.row.range==0?'所有':'指定'),
                            ])

                        }
                    },
                    {title: '使用规则',key: 'rule'},
                    {
                        title: '动作',
                        key: 'action',
                        align: 'left',
                        fixed: 'right',
                        width:220,
                        render: (h, params) => {
                            return h('div', [
                                h(Button, {
                                    props: {
                                        type: 'success',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {this.$router.push({path:'/promotion/template/edit/'+params.row.id})}
                                    }
                                }, '编辑'),
                                h(Button, {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        display:1==params.row.status?'none':'inline-block'
                                    },
                                    on: {
                                        click: () => {this.changeStatus(params.row.id,1,params.index)}
                                    }
                                }, '上线'),
                                h(Button, {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        display:0==params.row.status?'none':'inline-block'
                                    },
                                    on: {
                                        click: () => {this.changeStatus(params.row.id,0,params.index)}
                                    }
                                }, '关闭')
                            ]);
                        }
                    }

                ],
            }
        },
        methods:{
            init:function(){
                let self=this
                self.$http.get("/v1/promotion/templates",{params: { 'token': self.token }})
                    .then(function(response){
                        if(200==response.data.status && 0==response.data.code)
                        {
                            self.articleData=response.data
                        }
                        self.tableLoading=false
                    }).catch(function(error){
                    self.$Message.error(error.message)
                    self.tableLoading=false
                })
            },
            changePage:function(){
                let self=this
                self.tableLoading=true
                self.$http.get("/v1/promotion/templates",{params: { 'token': self.token, page:self.articleData.page, pageSize: self.articleData.pageSize
                        ,search:{filterKey:self.filterKey,key:self.key,statusKey:self.statusKey}}})
                    .then(function(response){
                        if(200==response.data.status && 0==response.data.code)
                        {
                            self.articleData=response.data
                        }
                        self.tableLoading=false
                    }).catch(function(error){
                    this.$Message.info(error.message);
                    self.tableLoading=false
                })
            },
            changePageSize:function(val){
                let self=this
                self.articleData.pageSize=val
                self.tableLoading=true
                self.$http.get("/v1/publishers",{params: { 'token': self.token, page:1, pageSize: self.articleData.pageSize}})
                    .then(function(response){
                        if(200==response.data.status && 0==response.data.code)
                        {
                            self.articleData=response.data
                        }
                        self.tableLoading=false
                    }).catch(function(error){
                    this.$Message.info( error.message);
                    self.tableLoading=false
                })
            },
            changeMenu:function(){
                this.$store.dispatch('setMenuActive','0')
                this.$store.dispatch('setMenuOpen', ['0'])
                return false;
            },
            changeStatus:function(uid,statusId,index){
                let self=this
                self.tableLoading=true
                self.$http.post("/v1/promotion/templates?_method=put&token="+self.token,{'id':uid,'data':'{"status":"'+parseInt(statusId)+'"}'})
                    .then(function(response){
                        if(200==response.data.status && 0==response.data.code)
                        {
                            self.articleData.data[index].status=statusId
                            self.$Message.success('操作成功');
                        }else{

                            self.$Message.error(response.data.message);
                        }
                        self.tableLoading=false
                    }).catch(function(error){
                    self.$Message.error( error.message);
                    self.tableLoading=false
                })
            },
            search:function(){
                let self=this
                self.tableLoading=true
                self.$http.get("/v1/promotion/templates",{params: { 'token': self.token, page:1, pageSize: self.articleData.pageSize
                        ,search:{filterKey:self.filterKey,key:self.key,statusKey:self.statusKey}
                    }})
                    .then(function(response){
                        if(200==response.data.status && 0==response.data.code)
                        {
                            self.articleData=response.data
                        }
                        self.tableLoading=false
                    }).catch(function(error){
                    this.$Message.info( error.message);
                    self.tableLoading=false
                })

            },
            authenticationStr:function(val){
                return String(val).replace(/[\[\]"]/g,"");
            },
            link2create:function(){this.$router.push({"name":"promotion-template-create"})}
        },
        created:function(){
        },
        mounted () {
            this.init()
            this.setTitle(this.title)
        },
        activated:function(){
            // this.init()
        },
        computed:{
            ...mapGetters(['token']),
        }
    }



</script>
<style lang="less" scoped>
</style>
